<template>
    <template v-if="corpPartnerList && corpPartnerList.length > 0">
        <table-header
            placeholder="请输入媒资名称"
            :queryList="queryList"
            @pagination="getCorpPartnerList"
            :rightColSpan="8"
            :leftColSpan="16"
            class="mt10 mb10"
        >
            <template #filter>
                <el-input
                    placeholder="请输入企业名称"
                    v-model="queryList.keywords"
                    style="width: 200px"
                    :clearable="true"
                    @clear="getCorpPartnerList"
                    size="mini"
                    @keyup.enter="getCorpPartnerList"
                />
            </template>
            <template #operation>
                <div></div>
            </template>
        </table-header>
        <el-table
            :data="corpPartnerList"
            border
            max-height="240px"
            class="mb10 corppart"
            highlight-current-row
            @select="handleSelect"
            @select-all="handleSelectAll"
            @selection-change="handleSelectionChange"
            @row-click="(row) => {handleRowClick(row)}"
            ref="tableref"
            v-loading="tableLoading"
        >
            <el-table-column type="selection"    />
            <el-table-column label="企业ID" prop="corpid" width="80px" />
            <el-table-column label="企业名称" prop="corpname" />
        </el-table>
        <table-pagination
        :queryList="queryList"
        :total="corpPartnerTotal"
        @pagination="getCorpPartnerList"
        />
        <div style="color:#bbb;font-size:12px;" class="mt10">{{props.psContent}}</div>
    </template>
    <template v-else-if="corpPartnerList.length == 0">
        <div style="margin-top: 5px;">{{props.emptyContent}}</div>
    </template>
</template>

<script setup>
    import { ref, defineProps, defineEmits, defineExpose } from 'vue'
    import { useStore } from 'vuex'
    import { getCorpPartner } from '@/api/corppartner/index'
    import TableHeader from "@/views/public/TableHeader";
    import TablePagination from "@/views/public/TablePagination";
import { nextTick } from 'process';


    const store = useStore()
    
    const corpPartnerCheckList = ref(props.corpPartnerCheckList)
    const tableLoading = ref(true)
    const queryList = ref({
        corpid: store.getters.corpinfo.corpid,
        pagesize: 10,
    })
    const corpPartnerList = ref([])
    const corpPartnerTotal = ref(0)
    let clearPageData = 1
    const tableref = ref(null)
    const getCorpPartnerList = () => {
        getCorpPartner(queryList.value).then(response => {
            tableLoading.value = false
            if (response.errcode == 0 && response.data.list.length > 0) {
                if( !props.shareConfirmButton ){
                    emit('update:shareConfirmButton', true)
                }
                corpPartnerTotal.value = response.data.total
                corpPartnerList.value = response.data.list
                clearPageData = 1
                nextTick(() => {
                    corpPartnerList.value.forEach((val) => {
                        if( corpPartnerCheckList.value.indexOf(val.corpid) >= 0 ){
                            tableref.value.toggleRowSelection(val,true)
                        }
                    })
                })
                /*setTimeout(function(){
                    corpPartnerList.value.forEach((val) => {
                        if( corpPartnerCheckList.value.indexOf(val.corpid) >= 0 ){
                            tableref.value.toggleRowSelection(val,true)
                        }
                    })
                }, 50 )*/
                
            } else {
                console.log(response)
            }
        })
    }

    //复选框
    const handleSelect = () => {
        clearPageData = 2
    }
    const handleSelectAll = (val) => {
        corpPartnerCheckList.value = corpPartnerCheckList.value.filter(item => {
            return !corpPartnerList.value.find(pop => {
                return item == pop.corpid
            })
        })
        if(val.length > 0){
            val.forEach(function(item){
                // console.log(corpPartnerCheckList.value)
                if( corpPartnerCheckList.value.indexOf(item.corpid) < 0 ){
                    corpPartnerCheckList.value.push(item.corpid)
                }
            })
        }
        emit('update:corpPartnerCheckList', corpPartnerCheckList.value)
    }
    const handleSelectionChange = (val) => {
        // console.log(clearPageData)
        if( clearPageData == 2 ){
            corpPartnerCheckList.value = corpPartnerCheckList.value.filter(item => {
                return !corpPartnerList.value.find(pop => {
                    return item == pop.corpid
                })
            })
        }
        // console.log(val)
        if(val.length > 0){
            val.forEach(function(item){
                // console.log(corpPartnerCheckList.value)
                if( corpPartnerCheckList.value.indexOf(item.corpid) < 0 ){
                    corpPartnerCheckList.value.push(item.corpid)
                }
            })
        }
        emit('update:corpPartnerCheckList', corpPartnerCheckList.value)
        // console.log(corpPartnerCheckList)
    }
    const handleRowClick = (row) => {
        clearPageData = 2
        tableref.value.toggleRowSelection(row)
    }

    const props = defineProps({
        corpPartnerCheckList: {
            type: Object
        },
        shareConfirmButton: {
            type: Boolean
        },
        psContent:{
            type: String
        },
        emptyContent:{
            type: String
        }
    })
    const emit = defineEmits(['update:corpPartnerCheckList', 'update:shareConfirmButton'])

    const init = () => {
        getCorpPartnerList()
    }
    defineExpose({
        init
    })
</script>

<style lang="scss">
    .corppart{
        .el-table__cell{
            padding: 0;
        }
    }
</style>